<template>
  <div class="">
    <ga-alert closable class="mb10">仅展示有异常的关联分析数据</ga-alert>
    <div v-show="!relateLoading">

      <ga-collapse :default-active-key="[relateList[0]?.id]" expand-icon-position="right" v-if="relateList.length > 0">
        <ga-collapse-item v-for="item in relateList" :key="item.id">
          <template #header>
            <div class="relate-panel-title">
              <div class="main-title">目标端后续异常请求</div>
              <div class="sub-title">
                <ga-tooltip position="tl" :content="item.src">
                  <div class="sub-title-name text-ellipsis">{{ item.src }}</div>
                </ga-tooltip>
                <div>-&gt;</div>
                <ga-tooltip position="tl" :content="item.dst">
                  <div class="sub-title-name text-ellipsis">{{ item.dst }}</div>
                </ga-tooltip>
                <span>
                  异常请求数量：
                  {{ item.exceptionCount }}
                </span>
              </div>
            </div>
          </template>
          <ga-table :data='item.list' size="medium" rowKey="id">
            <template #columns>
              <ga-table-column title="URL" dataIndex="contentKey" ellipsis>
                <template #cell="{ record }">
                  <ga-tooltip position="tl" :content="record.contentKey || record.dstPort">
                    <span class="span_a" @click="()=> nextDetail(record)">
                      {{ record.contentKey || record.dstPort }}
                    </span>
                  </ga-tooltip>
                </template>
              </ga-table-column>
              <ga-table-column title="协议" dataIndex="appProtocol" />
              <ga-table-column title="异常类型" dataIndex="exceptionClass">
                <template #cell="{ record }">
                  {{ exceptionTypesMap[record.exceptionClass] }}
                </template>
              </ga-table-column>
              <ga-table-column title="状态码" dataIndex="statusCode">
                <template #cell="{ record }">
                  {{ record.statusCode ?? '--' }}
                </template>
              </ga-table-column>
              <ga-table-column title="请求耗时" defaultSortOrder="descend" dataIndex="requestTotalTime" :sortable='{
                sorter: (a, b) =>
                  a.requestTotalTime - b.requestTotalTime
              }
                '>
                <template #cell="{ record }">
                  {{ formatUnit(record?.requestTotalTime, 'ns') }}
                </template>
              </ga-table-column>
              <ga-table-column title="请求时间" dataIndex="requestTime" :sortable='{
                sorter: (a, b) =>
                  dayjs(a.requestTime).valueOf() -
                  dayjs(b.requestTime).valueOf()
              }' />
            </template>

          </ga-table>
        </ga-collapse-item>
      </ga-collapse>
      <ga-empty v-else></ga-empty>
    </div>

    <div class="flex-spb-center" v-show="relateLoading">
      <ga-spin />
    </div>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue';
import { forEach, groupBy } from 'lodash'
import dayjs from 'dayjs';
import { formatUnit } from '@/utils/format';
const props = defineProps({
  maxSize: Number,
  detailInfo: {
    type: Object,
    default: () => ({})
  },
  visible: Boolean,
  relateList: {
    type: Array,
    default: () => []
  },
  relateLoading: Boolean
})
const emits = defineEmits(['go-next-detail'])
const exceptionTypesMap = {
  1: '建连失败',
  2: '错误请求',
  3: '错误请求',
  4: '慢请求',
  5: '错慢请求',
}
watch(() => props.relateList, (list) => {
  console.log(list, 'li');

})
</script>

<style scoped lang="scss">
.relate-panel-title {
  display: flex;
  align-items: center;

  .main-title {
    font-weight: bold;
    font-size: 15px;
    margin-right: 15px;
  }

  .sub-title {
    display: flex;
    font-size: 13px;
    color: #747474;

    .sub-title-name {

      max-width: 180px;
    }

    span {
      margin-left: 8px;
    }
  }
}
</style>
